{layout name="./base/base_back_1"}
		<title>填写订单信息</title>
		<link rel="stylesheet" type="text/css" href="/front/css/common.css"/>
		<link rel="stylesheet" type="text/css" href="/front/css/orderInfo.css"/>
		<link rel="stylesheet" type="text/css" href="/front/css/weifeng.css"/>
		<script src="/front/js/jquery.js"></script>
		<!--登录时订单信息开始-->
		<div id="nologin-orderinfo-box">
			<form action="/wishorders/saveorder" method="post">
				<div class="nologin-orderinfo">
					<div class="position-flow">
						<span style="font-size: 16px;">您的位置：</span>
						<span class="present-place">首页 > 交换房车选择 > 房车详情 > 填写订单</span>
						<span> > 在线支付 > 预订成功 </span>
					</div>
					<input type="hidden" name="wid" value="{$wishData.id}">
					<input type="hidden" name="cid" value="{$carInfo.id}">
					<div class="nologin-orderinfo-left">
						<div class="nologin-contactinfo">
							<h3>联系人信息<span>增加联系人</span></h3>
							<table>
								<tr>
									<th></th>
									<th>姓名</th>
									<th>证件类型</th>
									<th>证件号码</th>
									<th>手机号码</th>
									<th>邮箱</th>
								</tr>
								{volist name='contacts' id='vo'}
								<tr>
									<td><input type="checkbox" name="rent_contact_id[]" value="{$vo.id}"></td>
									<td>{$vo.name}</td>
									<td>{$vo.type}</td>
									<td>{$vo.type_number}</td>
									<td>{$vo.phone}</td>
									<td>{$vo.email}</td>
								</tr>
								{/volist}
							</table>
							<div>
								<div class="form-group-input">
									<div class="input-title">入住客人姓名<span id="nameerror" style="color: red;"></span></div>
									<input type="text" name="real_name"  placeholder="请输入入住客人姓名"/>
								</div>
								<div class="form-group-input">
									<div class="input-title">证件类型<span class="orderinfo-page-error"></span></div>
									<select name="type">
										<option value="身份证">身份证</option>
										<option value="护照">护照</option>
									</select>
								</div>
								<div class="form-group-input">
									<div class="input-title">证件号码<span id="id_card_error" style="color: red;"></span></div>
									<input type="text" name="id_card"  placeholder="请输入入住客人证件号码"/>
								</div>
								<div class="form-group-input">
									<div class="input-title">手机号码<span id="phone_error" style="color: red;"></span></div>
									<input type="text" name="phone"  placeholder="请输入您的手机号码"/>
								</div>
								<div class="form-group-input">
									<div class="input-title">邮箱地址<span id="emailerror" style="color: red;"></span></div>
									<input type="text" name="email"  placeholder="请输入您的邮箱"/>
								</div>
								
							</div>
						</div>
						<!-- 增加联系人start -->
						<script type="text/javascript">
							$(function(){
								$(".nologin-contactinfo > div").hide();
								$(".nologin-orderinfo-left h3 span").click(function(){
									$(".nologin-contactinfo > div").toggle();
								})
							})
						</script>
						<!-- 增加联系人end -->
						<div class="nologin-logininfo">
							<h3>登录信息</h3>
							<p>旅行币余额：<a href=>{$integral}</a></p>
							<p>如果旅行币不足，请通过<a href={php} echo url("/setcaravan/sharecaravan",'','','user'){/php}>分享</a>或<a href={php} echo url("/intergrate/index",'','','user'){/php}>充值</a>获得。</p>
						</div>
						<div class="clause-submit">
							<div class="service-clause">
								<input type="checkbox" value="true" name="Protocol" checked/>同意<a href="###">《房车营地规则和服务条款》</a>
							</div>
							<div class="nologin-submit">
								<span id="codeerror" style="color: red;"></span>
								<input type="text" name="imgCode"  placeholder="请输入验证码"/><label for=""><img  id="captcha_img" style="cursor: pointer;" onclick="this.src='{:captcha_src()}?d='+Math.random();" alt="点击更换" title="点击更换" src="{:captcha_src()}" class="m"></label>
								<button type="submit">提交订单</button>
							</div>
						</div>
					</div>
					<div class="nologin-orderinfo-right">
						<div class="nologin-carvan-cover">
							<i></i>
						</div>
						<!-- 房车图片 -->
						<style type="text/css">
							.nologin-orderinfo-right .nologin-carvan-cover i {
							display: block;
							background: url("{php}if(!empty($picCaravan['0'])){ echo $picCaravan['0'];}else{echo '';}{/php}") no-repeat;
							background-size: cover;
							background-position: center center;
							height: 100%;
						}
						</style>
						<div class="cost-caravaninfo">
						<div class="nologin-carvaninfo">
							<h4>{$carInfo.name}</h4>
							<p class="nologin-camp"><a href="###">{$carInfo.camps.name}</a></p>
							<p>地址：<span>{$carInfo.camps.address}</span></p>
						</div>
						<div class="nologin-live-time">
							<ul>
								<li class="nologin-time">
									<p>入住</p>
									<p>{$wishData.start_date}</p>
								</li>
								<li class="nologin-img"><img src="/front/img/jt.png" alt="" /></li>
								<li class="nologin-time">
									<p>离开</p>
									<p>{$wishData.end_date}</p>
								</li>
							</ul>
						</div>
						<div class="nologin-cost-list">
							<ul>
								<li class="cost">
									<p class="unit-price">{$days}日<em class="nologin-help"></em></p>
									<p class="count-price">{$total_intergral}旅行币</p>
									<ul class="help-explain pledge-explain" style="display: none;">
										<li class="close-prompt"></li>
										<li>Note</li>
										<li>每日基本价格<i style="color: red; font-weight: 600;">{$travel_money_base}</i>旅行币,周末按1.25,节日按1.5。相乘得出总价</li>
									</ul>
								</li>
								<li class="cost">
									<p class="service-title">服务费</p>
									<p class="service-charge"><i>¥</i>0</p>
								</li>
								<li class="cost">
									<p class="service-title">悬赏旅行币</p>
									<p class="service-charge">{$wishData.score}旅行币</p>
								</li>
								<!--删除押金-->
								<li class="cost">
									<ul class="help-explain extra-explain" style="display: none;">
										<li class="close-prompt"></li>
										<li>Note</li>
										<li>旅行币余额不足，将使用现金补足，人民币兑旅行币比率为2：1</li>
									</ul>
								</li>
							</ul>
						</div>
						<script type="text/javascript">
							$(".nologin-help").hover(function(){
								num = $(this).index(".nologin-help");
								$(".help-explain").eq(num).css('display','block');
							},function(){
								$(".help-explain").eq(num).css('display','none');
							})
						</script>
						<div class="nologin-allcost">
						<p>
							<span class="total-pay">共需支付</span>
							<span class="nologin-all-cash">{$all_intergral}旅行币</span>
						</p>
						<!--删除押金-->
					</div>
					</div>
					</div>
				</div>
			</form>
		</div>
		<!--登录时订单信息结束-->
		<script type="text/javascript">
		    	$(function(){
		    		//真实姓名
		    		$("input[name='real_name']").blur(function(){
		    			var real_name = $('input[name="real_name"]').val();
		    			//不能为空
		    			if(!$.trim(real_name)) {
							$("input[name='real_name']").css({border: "1px solid red"});
							$("#nameerror").html("必填");
							return false;
		    			}else{
		    				$("input[name='real_name']").css({border: "1px solid green"});
							$("#nameerror").html("");
		    			}
		    		})
		    		//证件号码
		    		$("input[name='id_card']").blur(function(){
		    			var id_card = $('input[name="id_card"]').val();
		    			//不能为空
		    			if(!$.trim(id_card)) {
							$("input[name='id_card']").css({border: "1px solid red"});
							$("#id_card_error").html("必填");
							return false;
		    			}else{
		    				$("input[name='id_card']").css({border: "1px solid green"});
							$("#id_card_error").html("");
		    			}
		    		})
		    		//邮箱
		    		$("input[name='email']").blur(function(){
		    			var email = $('input[name="email"]').val();
		    			//不能为空
		    			if(!$.trim(email)) {
							$("input[name='email']").css({border: "1px solid red"});
							$("#emailerror").html("必填");
							return false;
		    			}else{
		    				$.get('/reserve/checkemail?email='+$("input[name='email']").val(),function(data) {
								$("input[name='email']").css({border: "1px solid green"});
								$("#emailerror").html("");
								if (data===0) {
									$("input[name='email']").css({border: "1px solid red"});
									$("#emailerror").html("格式不正确");
								}
							});
		    			}
		    		})
		    		//手机格式
		    		$("input[name='phone']").blur(function(){
		    			var phone = $('input[name="phone"]').val();
		    			//不能为空
		    			if(!$.trim(phone)) {
							$("input[name='phone']").css({border: "1px solid red"});
							$("#phone_error").html("必填");
							return false;
		    			}
		    			//手机号格式是否满足
		    			if((/^1[3|4|5|7|8]\d{9}$/.test(phone)) || (/(^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+\.[a-zA-Z0-9_-]+$)|(^$)/.test(phone))){
							$("input[name='phone']").css({border: "1px solid green"});
							$("#phone_error").html("");
		    			}else {
							$("input[name='phone']").css({border: "1px solid red"});
							$("#phone_error").html("格式不正确");
							return false;
		    			}
		    		})
		    		//验证码验证
		    		$('input[name="imgCode"]').blur(function(){
		    			var imgCode = $('input[name="imgCode"]').val();
		    			//不能为空
		    			if(!$.trim(imgCode)) {
							$("input[name='imgCode']").css({border: "1px solid red"});
							$("#codeerror").html("请输入验证码");
							return false;
		    			}else {
		    				$.get('/reserve/checkcode?imgCode='+$("input[name='imgCode']").val(),function(data) {
								$("input[name='imgCode']").css({border: "1px solid green"});
								$("#codeerror").html("");
								if (data===0) {
									$("input[name='imgCode']").css({border: "1px solid red"});
									$("#codeerror").html("验证码错误");
								}
							});
		    			}
		    		})

		    	})
		</script>